import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
// React component
class Counter extends Component {
    constructor(...props) {
        super(...props);
    }
    render() {
        const { value, onIncrement } = this.props;
        return (<p>Clicked: {value} times<button onClick={onIncrement}>+</button></p>)
    }
}

Counter.propTypes = {
    value: PropTypes.number.isRequired,
    onIncrement: PropTypes.func.isRequired
};
// Action
const increaseAction = { type: 'INCREMENT' };
// Reducer
let counter = (state = 0, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        default:
            return state
    }
};
// Store
const store = createStore(counter);

const render = () => ReactDOM.render(
    <Counter
        value={store.getState()}
        onIncrement={() => store.dispatch(increaseAction)}
    />,
    document.getElementById('root')
);

render();
store.subscribe(render);